import { motion } from 'framer-motion';

const useCases = [
  {
    id: 1,
    title: "中小型会计事务所",
    description: "解决多项目并行时的工时混乱与奖金争议，提升项目管理效率和透明度。",
    icon: "accounting"
  },
  {
    id: 2,
    title: "咨询公司",
    description: "优化客户项目流程，精准核算人力成本，提高资源利用率和项目盈利能力。",
    icon: "consulting"
  },
  {
    id: 3,
    title: "代理记账企业",
    description: "实现代理记账业务的自动化运维，减少人工操作，提高服务质量和效率。",
    icon: "bookkeeping"
  }
];

const ValueProposition = [
  {
    id: 1,
    title: "员工视角",
    description: "工时透明、奖金分配公平，激发工作积极性，提升工作满意度。",
    icon: "employee"
  },
  {
    id: 2,
    title: "管理层视角",
    description: "数据驱动决策，资源分配更精准，项目利润率提升，管理效率提高。",
    icon: "management"
  },
  {
    id: 3,
    title: "客户视角",
    description: "项目流程清晰可追溯，服务质量提升，增强合作信任度和满意度。",
    icon: "customer"
  }
];

const CaseIcon = ({ icon }: { icon: string }) => {
  return (
    <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-6">
      {icon === "accounting" && (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      )}
      {icon === "consulting" && (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
      )}
      {icon === "bookkeeping" && (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      )}
      {icon === "employee" && (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
      )}
      {icon === "management" && (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
       )}
       {icon === "implementation" && (
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
         </svg>
       )}
       {icon === "iteration" && (
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
         </svg>
       )}
       {icon === "training" && (
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
         </svg>
       )}
       {icon === "customer" && (
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
         </svg>
      )}
    </div>
  );
};

export default function UseCases() {
  return (
    <section id="usecases" className="py-20 bg-white">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">适用场景与用户价值</h2>
          <p className="mt-4 text-lg text-gray-600">
            捷益通智能财务项目管理系统适用于多种财务类企业，为不同角色带来独特价值
          </p>
        </div>
        
        <div className="mb-20">
          <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">适用场景</h3>
          <div className="grid md:grid-cols-3 gap-8">
            {useCases.map((useCase) => (
              <motion.div
                key={useCase.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
              >
                <CaseIcon icon={useCase.icon} />
                <h4 className="text-xl font-semibold text-gray-900 mb-3">{useCase.title}</h4>
                <p className="text-gray-600">{useCase.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
        
        <div>
          <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">用户价值</h3>
          <div className="grid md:grid-cols-3 gap-8">
            {ValueProposition.map((value) => (
              <motion.div
                key={value.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
              >
                <CaseIcon icon={value.icon} />
                <h4 className="text-xl font-semibold text-gray-900 mb-3">{value.title}</h4>
                <p className="text-gray-600">{value.description}</p>
              </motion.div>
            ))}
           </div>
           
           <div className="mt-20">
             <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">服务支持</h3>
             <div className="grid md:grid-cols-3 gap-8">
               {[
                 {
                   id: 1,
                   title: "实施保障",
                   description: "提供定制化部署方案（SaaS/私有化）",
                   icon: "implementation"
                 },
                 {
                   id: 2,
                   title: "持续迭代",
                   description: "季度版本更新，功能持续扩展",
                   icon: "iteration"
                 },
                 {
                   id: 3,
                   title: "培训体系",
                   description: "分角色培训课程（管理员/操作员）",
                   icon: "training"
                 }
               ].map((service) => (
                 <motion.div
                   key={service.id}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5 }}
                   viewport={{ once: true }}
                   className="bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
                 >
                   <CaseIcon icon={service.icon} />
                   <h4 className="text-xl font-semibold text-gray-900 mb-3">{service.title}</h4>
                   <p className="text-gray-600">{service.description}</p>
                 </motion.div>
               ))}
             </div>
           </div>
        </div>
      </div>
    </section>
  );
}